import { useEffect, useState } from "react"

const URL = 'http://geek.itheima.net/v1_0/channels'

function App() {
  const [count, setCount] = useState(0)

  // 2. 点击事件回调
  const handleClick = () => {
    // 作用:
    // 1. 用传入的新值修改count
    // 2. 重新使用新的count渲染UI
    setCount(count + 1)
  }

  // 创建一个状态数据
  const [list, setList] = useState([])
  useEffect(() => {
    // return console.log('副作用函数执行了')

    async function getList() {
      const res = await fetch(URL)
      const jsonRes = await res.json()

      console.log(res, jsonRes, typeof res);
      setList(jsonRes.data.channels)
    }
    getList()
  }, [count])


  return (
    <div>
      this is app22
      <ul>
        {list.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
      <button onClick={handleClick}>按钮{count}</button>
    </div>
  )
}

export default App
